<template>
    <div class="monitor-infor">
      <header>
  <!-- Hacker News header -->
  <select v-model="newsType" @change="changeType">
    <!-- Type options -->
  </select>
</header>
<button @click="show">显示</button>
<div v-if="isShow">
  <div v-for="(item, $index) in list" :key="$index" style="border:1px solid red;padding:10px;">
    <!-- Hacker News item loop -->{{item.name}}
  </div>
  <infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
</div>

    </div>
</template>
<script>
import $ from "jquery";
import { BASEURL } from "./../api/api";
import axios from "axios";
import headTop from "./common/header";
import InfiniteLoading from 'vue-infinite-loading'
import { setTimeout } from 'timers';
export default {
  components: { headTop,InfiniteLoading },
  data() {
    return{
      list:[{'name':'张三'},{'name':'李四'},{'name':'张三'},{'name':'李四'},{'name':'张三'},{'name':'李四'},
        {'name':'中国'},{'name':'名族'},{'name':'中国'},{'name':'名族'},{'name':'中国'},{'name':'名族2'}
      ],
      newsType:'love',
      infiniteId:+new Date(),
      isShow:false,
    }
  },
  methods:{
    show(){ 
      this.isShow = true;
    },
    infiniteHandler($state) {
      console.log('get data')
     setTimeout(()=>{
       this.list.push({'name':'王五'})
       $state.loaded();
     },2000)
    },
    changeType(){

    }
  }

}
</script>
<style lang='scss' scoped>


</style>